<template>
  <div class="bg">
    <div class="dis-flex">
      <div>
        <el-input v-model="SearchIn" placeholder="请输入搜索的信息" />
      </div>
      <div>
        <el-input v-model="ApplicantName" placeholder="申请人姓名" />
      </div>
      <div>
        <el-button type="primary">搜索</el-button>
      </div>
    </div>
    <div class="tabs">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          label="待派遣"
          name="first"
        ><ToBeDispatched /></el-tab-pane>
        <el-tab-pane label="已派遣" name="second"><Dispatch /></el-tab-pane>
        <el-tab-pane label="已完成" name="third"><Completed /></el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import ToBeDispatched from './modules/ToBeDispatched'
import Dispatch from './modules/Dispatch'
import Completed from './modules/Completed'
export default {
  components: {
    ToBeDispatched,
    Dispatch,
    Completed
  },
  data() {
    return {
      SearchIn: '',
      ApplicantName: '',
      activeName: 'first'
    }
  },
  mounted() {
    this.activeName = this.$route.query.tabindex || 'first'
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
}
.dis-flex {
  background-color: #fff;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  div {
    margin: 10px;
  }
}
.tabs {
  padding: 1rem 2rem;
}
.bg {
  padding-top: 10px;
  background-color: #f4f5f6;
  height: 100vh;
}
</style>
